<script setup>
    // 1.导入
    import {useTodoStore} from '@/store/todo.js'
    import {ref} from "vue"
    // 2.创建
    const todo = useTodoStore()

    // 新增任务
    const add = (e) => {
        // 获取数据
        const text = e.target.value.trim()
        // 文本校验
        if(!text) return alert("任务不能为空！")
        // 调用仓库方法进行新增
        todo.add(text)
        // 输入框置空
        e.target.value = ''
    }

</script>
<template>
 <header class="header">
    <h1>todos</h1>
    <input class="new-todo" 
    placeholder="What needs to be finished?" 
    autofocus 
    @keydown.enter="add($event)"
    />
 </header>
</template>